<template>
  <div class="pageContain" style="color: black; width: calc(100% - 2vw)">
    <div class="divBeteewn">
      <div
        class="addOneButton divCenter"
        style="margin-top: 2vh"
        @click="addOne()"
      >
        新增设备 +
      </div>
    </div>
    <div class="addInputAndSelect divFlex">
      <el-input
        clearable
        v-model="inputText"
        style="width: 12vw; font-size: 1vw"
        placeholder="设备名称/设备编号"
      ></el-input>
      <div style="margin-left: 0.5vw">设备类型:</div>
      <el-select
        style="width: 8vw"
        placeholder="设备类型"
        clearable
        v-model="searchDeviceType"
      >
        <el-option label="电" :value="1"></el-option>
        <el-option label="燃气" :value="2"></el-option>
        <el-option label="水表" :value="3"></el-option>
        <el-option label="光伏" :value="4"></el-option>
      </el-select>

      <div style="margin-left: 0.5vw">设备状态:</div>
      <el-select
        style="width: 8vw"
        placeholder="设备状态"
        clearable
        v-model="searchDeviceStatus"
      >
        <el-option label="在线" value="在线"></el-option>
        <el-option label="离线" value="离线"></el-option>
      </el-select>
      <div
        class="addOneButton divCenter"
        style="font-size: 1vw; margin-left: 1vw"
        @click="getRenderList()"
      >
        搜索
      </div>
    </div>
    <el-row>
      <el-col>
        <el-table
          :data="dataList"
          style="height: auto; width: 100%; margin-top: 2vh"
          max-height="65vh"
          empty-text="暂无数据"
          :header-row-style="{
            height: '6vh',
            fontSize: '1vw',
            color: 'white',
            background:
              'linear-gradient(90deg, white 0%, #005EBC 5%, #005EBC 95%, white 100%)',
            borderBottom: '1px solid #EBEEF5',
            borderRight: '1px solid #EBEEF5',
          }"
          :row-style="{
            height: '7vh',
            borderBottom: '1px solid black !important',
          }"
          border
          ref="tableRef"
          highlight-current-row
        >
          <el-table-column prop="name" label="设备名称" min-width="150">
          </el-table-column>
          <el-table-column prop="number" label="设备编号" min-width="150">
          </el-table-column>
          <el-table-column prop="location" label="安装位置" align="center">
          </el-table-column>
          <el-table-column prop="defaultValue" label="设定值" align="center">
          </el-table-column>
          <el-table-column prop="type" label="设备类型" align="center">
            <template #default="scope">
              <div v-if="scope.row.type == '1'">电表</div>
              <div v-if="scope.row.type == '2'">燃气</div>
              <div v-if="scope.row.type == '3'">水表</div>
              <div v-if="scope.row.type == '4'">光伏</div>
            </template></el-table-column
          >

          <el-table-column
            prop="subject"
            label="MQTT主题"
            align="center"
          ></el-table-column>
          <el-table-column prop="state" label="当前状态" align="center">
            <template #default="scope">
              <div v-if="scope.row.state == true">在线</div>
              <div v-else style="color: red">离线</div>
            </template></el-table-column
          >

          <el-table-column prop="state" label="设置" align="center"
            ><template #default="scoped">
              <div class="optContain divBeteewn">
                <div style="color: #005ebb" @click="editOne(scoped.row.id)">
                  编辑
                </div>
                <div
                  style="color: #005ebb"
                  @click="deleteOne(scoped.row.id, scoped.row.name)"
                >
                  删除
                </div>
              </div>
            </template></el-table-column
          >
        </el-table>
      </el-col>
    </el-row>

    <div class="dialog" :style="{ display: dialog2 }">
      <div class="dialogInner">
        <div class="dialogInnerText" style="width: 56vw">
          <div class="dialogTop divCenter">
            <div class="dialogName">{{ addOrEdit }}设备</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>
          <div class="dialogTips divCenter">
            确定要删除 &nbsp{{ deletname }} &nbsp吗？
          </div>
          <div class="dubleButton divCenter">
            <div class="cancelButton divCenter" @click="close()">取消</div>
            <div
              class="sureButton divCenter"
              style="background: #d30000"
              @click="sureDelete()"
            >
              确定
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog" :style="{ display: dialog3 }">
      <div class="dialogInner">
        <div class="dialogInnerText" style="width: 47.5vw">
          <div class="dialogTop divCenter">
            <div class="dialogName">{{ addOrEdit }}设备</div>
            <div class="dialogClose divCenter" @click="close()"></div>
          </div>
          <div class="form">
            <div class="inputInner divCenter">
              <div class="deviceName">设备名称</div>
              <el-input
                style="border-right: 1px solid #0281b8"
                v-model="form.name"
              ></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">设备类型</div>
              <el-select v-model="form.type" placeholder="">
                <el-option label="电表" :value="1"></el-option>
                <el-option label="燃气" :value="2"></el-option>
                <el-option label="水表" :value="3"></el-option>
                <el-option label="光伏" :value="4"></el-option>

                <!-- 2：燃气， 3：水表， 4：光伏 -->
              </el-select>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">安装位置</div>
              <el-input
                v-model="form.location"
                style="border-right: 1px solid #0281b8"
              ></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">设定值</div>
              <el-input
                v-model="form.defaultValue"
                type="number"
                style="border-right: 1px solid #0281b8"
              ></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">设备型号</div>
              <el-input
                v-model="form.deviceModel"
                style="border-right: 1px solid #0281b8"
              ></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">设备编号</div>
              <el-input
                v-model="form.number"
                style="border-right: 1px solid #0281b8"
              ></el-input>
            </div>

            <div class="inputInner divCenter">
              <div class="deviceName">MQTT订阅主题名称</div>
              <el-input
                v-model="form.subject"
                style="border-right: 1px solid #0281b8"
              ></el-input>
            </div>
            <div class="inputInner divCenter">
              <div class="deviceName">是否是合并设备</div>
              <el-select v-model="form.isMerge" placeholder="">
                <el-option label="是" :value="true"></el-option>
                <el-option label="否" :value="false"></el-option>
              </el-select>
            </div>
            <div class="inputInner divCenter" v-if="this.form.isMerge">
              <div class="deviceName">父级设备</div>
              <el-select v-model="form.parentId" placeholder="父级设备">
                <el-option
                  v-for="item in parentList"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>

            <div
              class="dubleButton divCenter"
              style="margin-top: 2vh; padding-bottom: 6vh"
            >
              <div
                class="cancelButton divCenter"
                style="background: #d30000"
                @click="close()"
              >
                取消
              </div>
              <div class="sureButton divCenter" @click="sureAdd()">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sendMessage from "@/mitt/sendMessage.js";
import service from "@/api/api";
export default {
  name: "",
  beforeRouteEnter(to, from, next) {
    sendMessage(4, "设备管理");
    next();
  },

  data() {
    return {
      dialog2: "none",
      dialog3: "none",
      dialog4: "none",
      select: "",
      addOrEdit: "",
      deletname: "",
      id: null,
      location: "",
      defaultValue: "",
      type: "",
      warningName: "",
      deviceModel: "",
      subject: "",
      state: "",
      dataList: [],
      highlightRowId: "",
      tableWidth: "",
      parentList: [],
      form: {
        name: "",
        id: "",
        type: "",
        location: "",
        defaultValue: "",
        subject: "",
        state: "",
        deviceModel: "",
        number: "",
        isMerge: "",
        parentId: "",
      },
     
      date1: [{ time: "2025/2/21", water: "233" }],
      id: null,
      bigScreen: false,
      addWaterNumber: null,
      addWaterTime: "",
      inputText: "",
      searchDeviceType: "",
      searchDeviceStatus: "",
      addOrEdit: "",
    };
  },
  props: [],

  methods: {
    addOne() {
      this.addOrEdit = "新增";
      this.dialog3 = "block";
    },
    async getRenderList() {
      if (this.warningName) {
        let res = await service({
          method: "GET",
          url: "/device/find-all",
          params: {
            number: this.warningName,
          },
        });
        this.dataList = res.data;
        this.warningName = "";
      } else {
        let data = {};
        if (
          this.inputText &&
          this.searchDeviceType &&
          this.searchDeviceStatus
        ) {
          data = {
            text: this.inputText,
            type: this.searchDeviceType,
            state: this.searchDeviceStatus == "在线" ? true : false,
          };
        } else if (this.inputText && this.searchDeviceType) {
          data = {
            text: this.inputText,
            type: this.searchDeviceType,
          };
        } else if (this.inputText && this.searchDeviceStatus) {
          data = {
            text: this.inputText,
            state: this.searchDeviceStatus == "在线" ? true : false,
          };
        } else if (this.searchDeviceType && this.searchDeviceStatus) {
          data = {
            type: this.searchDeviceType,
            state: this.searchDeviceStatus == "在线" ? true : false,
          };
        } else if (
          this.inputText &&
          !this.searchDeviceType &&
          !this.searchDeviceStatus
        ) {
          data = {
            text: this.inputText,
          };
        } else if (
          !this.inputText &&
          this.searchDeviceType &&
          !this.searchDeviceStatus
        ) {
          data = {
            type: this.searchDeviceType,
          };
        } else if (
          !this.inputText &&
          !this.searchDeviceType &&
          this.searchDeviceStatus
        ) {
          data = {
            state: this.searchDeviceStatus == "在线" ? true : false,
          };
        }

        let res = await service({
          method: "GET",
          url: "/device/find-all",
          params: data,
        });
        this.dataList = res.data;
      }
    },
    sureAdd() {
      if (this.addOrEdit == "新增") {
        let data = this.form;

        service({
          method: "POST",
          url: "/device",
          data: data,
        })
          .then((e) => {
            if (e.status == "SUCCESS") {
              this.close();
              this.getRenderList();
              this.$message({
                message: "新增成功",
                type: "success",
              });
            }
          })
          .catch((err) => {
            this.$message({
              message: "新增失败",
              type: "warning",
            });
          });
      } else if (this.addOrEdit == "编辑") {
        let data = this.form;
        service({
          method: "PUT",
          url: "/device",
          data: data,
        })
          .then((e) => {
            this.close();
            this.getRenderList();
            this.$message({
              message: "修改成功",
              type: "success",
            });
          })
          .catch((err) => {
            this.$message({
              message: "修改失败",
              type: "success",
            });
          });
      }
    },
    editOne(a) {
      this.addOrEdit = "编辑";
      this.parentList = JSON.stringify(this.dataList);
      this.parentList = JSON.parse(this.parentList);
      this.parentList.forEach((item) => {
        if (item.id == a) {
          let index = this.parentList.indexOf(item);
          this.parentList.splice(index, 1);
        }
      });
      this.dataList.forEach((item) => {
        if (item.id == a) {
          this.form.name = item.name;
          this.form.id = a;
          this.form.location = item.location;
          this.form.defaultValue = item.defaultValue;
          this.form.type = item.type;
          this.form.subject = item.subject;
          this.form.state = item.state;
          this.form.deviceModel = item.deviceModel;
          this.form.number = item.number;
          this.form.isMerge = item.isMerge;
          this.form.parentId = item.parentId;
        }
      });
      this.dialog3 = "block";
    },
    addWater() {
      if (this.addWaterNumber && this.addWaterTime) {
        this.date1.push({
          time: this.addWaterTime,
          water: this.addWaterNumber,
        });
        this.addWaterNumber = "";
        this.addWaterTime = "";
      } else {
        this.$message({
          message: "时间和水量不可缺少！",
          type: "warning",
        });
      }
    },
    showgroup() {
      this.dialog4 = "block";
    },
    showDetail() {
      this.dialog3 = "block";
    },
    deleteOne(id, name) {
      this.dialog2 = "block";
      this.id = id;
      this.deletname = name;
    },
    sureDelete() {
      service({
        method: "delete",
        url: `/device/${this.id}`,
      })
        .then((e) => {
          this.close();
          this.getRenderList();
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.id = null;
          this.deletname = "";
        })
        .catch((err) => {
          this.close();
          this.getRenderList();
          this.$message({
            message: "删除失败",
            type: "warning",
          });
        });
    },
    clear() {
      this.form = {
        name: "",
        id: "",
        type: "",
        location: "",
        defaultValue: "",
        subject: "",
        state: "",
        deviceModel: "",
        number: "",
        isMerge: null,
        parentId: "",
      };
    },
    addOne() {
      this.dialog3 = "block";
      this.addOrEdit = "新增";
      this.parentList = this.dataList;
    },
    close() {
      this.dialog2 = "none";
      this.dialog3 = "none";
      this.dialog4 = "none";
      this.clear();
    },
    handClick() {},
    handResize() {
      this.tableWidth = window.innerWidth - 150 + "px";

      if (window.innerWidth > 1920) {
        this.bigScreen = true;
      } else {
        this.bigScreen = false;
      }
    },
    onSubmit() {},
    sendMessage() {
      let res = this.$route.path;
      EventBus.emit("custom-event", res);
    },
  },
  watch: {
    $route(to, from) {
      // 检查路由是否真的变化了
      if (
        to.path !== from.path ||
        JSON.stringify(to.query) !== JSON.stringify(from.query)
      ) {
        this.warningName = "";
        this.getRenderList();
        // 强制刷新组件
        // this.$router.go(0);
        // 或者使用 window.location.reload() 完全刷新页面
      }
    },
  },
  created() {
    this.handResize();

    if (this.$route.query?.name) {
      this.warningName = this.$route.query?.name;
    }
    this.getRenderList();
  },
  mounted() {
    // this.sendMessage();
    window.addEventListener("resize", this.handResize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handResize);
  },
};
</script>
<style lang="less" scoped>
// table的修改部分===========
.el-table {
  font-size: 1vw;
}
:deep(.el-table__cell) {
  padding: 0 !important;
  // border-bottom: 1px solid red;
}
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  border-bottom: 1px solid #a4a6a7;
}
:deep(.el-table__cell .cell) {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 3.5vh;
  padding: 0 !important;
  // height: 7vh !important;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

:deep(.el-table__row) {
  border-bottom: 1px solid black;
}
// table样式修改结束=======================
.el-input {
  width: 100%;
}
:deep.el-form-item__content {
  margin-left: 0 !important;
}

.optContain {
  width: 5.5vw;
}
.el-input {
  width: 20.3vw;
  height: 4vh;
}
:deep(.el-form-item) {
  margin-bottom: 2vh;
}
.inputInner {
  :deep(.el-input__inner) {
    // height: 5vh !important;
    border: 1px solid #0281b8;

    text-indent: 0.5vw;
    border-right: none !important;
    // box-shadow: none !important;
  }

  :deep(.el-input-group__append) {
    box-shadow: 0 1px 0 0 #0281b8 inset, 0 -1px 0 0 #0281b8 inset,
      -1px 0 0 0 #0281b8 inset !important;
    background: #efefef !important;
    height: 4vh !important;
  }
  :deep(.el-input__wrapper) {
    background: #efefef !important;
    border-right: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 3px;
  }
  :depp(.el-input__icon) {
    color: #0281b8;
  }
  :deep(.el-input__wrapper) {
    height: 4vh;
    background: #efefef !important;
  }
  :deep(.el-input__inner) {
    font-size: 1vw;
    height: 4vh !important;
    color: black;
  }
}
:deep(.el-textarea__inner) {
  background: #efefef !important;
  box-shadow: 0 0 0 1px #0281b8 inset;
  line-height: 2vh;
  padding: 1vh 0.5vw;
  font-size: 1vw;
}
:deep(.el-table td.el-table__cell) {
  border-bottom: 1px solid #a4a6a7;
}
:deep(.el-table tr:last-child td) {
  border-bottom: none;
}
.form {
  width: 90%;
  // height: 60vh;
  margin: auto;
  margin-top: 2vh;
  background: white;

  .inputInner {
    width: 100%;
    margin-bottom: 3.2vh;
    .deviceName {
      font-size: 1.2vw;
      font-weight: 400;
      width: 11.3vw;
      text-align: center;
      color: black;
    }
  }
  .inputInner1 {
    .date1 {
      .el-datePicker {
        font-size: 1vw;
      }
      :deep(.el-input__inner, .el-input__inner::placeholder) {
        color: black;
        font-size: 1vw;
      }

      :deep(.el-input__inner) {
        color: black;
        height: 4vh !important;
      }
      :deep(.el-input--prefix) {
        height: 4vh !important;
      }
      :deep(.el-input__wrapper) {
        padding-left: 0.5vw !important;
        height: 4vh !important;
      }
      :deep(.el-input__icon) {
        color: white;
        font-size: 0.7vw;
      }
    }
    width: 100%;
    margin-bottom: 3.2vh;
    .deviceName {
      font-size: 1.2vw;
      font-weight: 400;
      width: 11.3vw;
      text-align: center;
      color: black;
    }
    .putWater {
      margin-left: 0.5vw;
      width: 12vw;
      font-size: 1vw;
      .el-input {
        font-size: 1vw;
      }
    }
    .buttonAdd {
      width: 5vw;
      background: #005ebc;
      font-size: 1vw;
      margin-left: 0.5vw;
      color: white;
    }
  }
}
.el-select {
  width: 20.3vw;
  background: #efefef;
  color: black;
}
:deep(.el-select__selected-item) {
  color: black;
  font-size: 1vw;
  height: 4vh !important;
  display: flex;
  align-items: center;
}
:deep(.el-select__placeholder) {
  color: rgb(55, 54, 54);
  font-size: 1vw;
  height: 4vh !important;
  display: flex;
  align-items: center;
}
:deep(.el-select__icon) {
  color: black;
  font-size: 0.7vw !important;
}
:deep(.el-select__wrapper) {
  height: 4vh !important;
}
.waterBox {
  width: 20.3vw;
  height: 20vh;
  border: 1px solid #0281b8;
}
.addInputAndSelect {
  margin-top: 2vh;

  .el-select {
    width: 20.3vw;
    background: white;
    color: black;
  }
  :deep(.el-select__selected-item) {
    color: black;
    font-size: 1vw;
    height: 4vh !important;
    display: flex;
    align-items: center;
  }
  :deep(.el-select__placeholder) {
    color: #b5b7bd;
    font-size: 1vw;
    height: 4vh !important;
    display: flex;
    align-items: center;
  }
  :deep(.el-select__icon) {
    color: black;
    font-size: 0.7vw !important;
  }
  :deep(.el-select__wrapper) {
    height: 4vh !important;
  }
  // :deep(.el-select__placeholder) {
  //   color: #ff0000;
  // }
}
</style>
